<div class="ui centered container grid">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="ui six wide column raised very padded text segment">
    <h2 class="ui teal dividing header"><img src="../../../../assets/img/logo31.png" style="cursor: pointer" alt="" [routerLink]="['', 'home']">Sign Up for new Account</h2>
    <div *ngIf="1" class="ui error message">
      <ul class="list">
        <li>incorrect username or password.</li>
      </ul>
    </div>

    <form class="ui form attached padded fluid segment" [formGroup]="userForm" (submit)="register()">
      <div class="twelve wide field">
        <label>Username</label>
        <div class="ui left icon input">
          <input type="text" name="regname" id="regname" formControlName="username" placeholder="Username" 
          [(ngModel)]="user.username">
          <i class="user icon"></i>
        </div>
      </div>
      <div class="twelve wide field">
        <label>Email</label>
        <div class="ui left icon input">
          <input type="email" name="regname" id="regname" formControlName="email" placeholder="Email"
          [(ngModel)]="user.email">
          <i class="mail icon"></i>
        </div>
      </div>
      <div class="twelve wide field">
        <label>Password</label>
        <div class="ui left icon input">
          <input type="password" name="regpass" id="regpass" formControlName="password" placeholder="password"
          [(ngModel)]="user.password">
          <i class="protect icon"></i>
        </div>
      </div>
      <div class="twelve wide field">
        <label>Confirm Password</label>
        <div class="ui left icon input">
          <input type="password" name="reregpass" id="reregpass" placeholder="Confirm Password">
          <i class="protect icon"></i>
        </div>
      </div>
      <button class="ui teal button" [disabled]="userForm.valid" type="submit">Sign Up</button>
    </form>
    <div class="ui bottom attached positive message">
      Already have an account ? 
      <a [routerLink]="['', 'login']">Login</a>
    </div>
  </div>
</div>